<template>
	<div class="noticeList">
		<div class='my-header'></div>
		<div class="listmain">
			<van-cell 
				center 
				@click="routerPush(formData)" 
			>
				<template #title>
					<div>类型：{{formData.szid_ex11}} &nbsp;</div>
				</template>
				<template #label>
					<template v-if="formData.szid_ex11 == '盘花租借'">
						<div>联系人人：{{formData.gy_ex1}}</div>
						<div>联系电话：{{formData.gy_ex3}}</div>
						<div>身份证号：{{formData.gy_ex5}}</div>
					</template>
					<template v-else-if="formData.szid_ex11 == '代客祭扫'">
						<div>墓位：{{formData.Tombs}}</div>
						<div>电话：{{formData.sz_ex12}}</div>
						<div>祭祀时间：{{formData.szidDat3}}</div>
					</template>
					<template v-else-if="formData.szid_ex11 == '预约祭扫'">
						<div>预约人姓名：{{formData.gmy_ex1}}</div>
						<div>联系电话：{{formData.gmy_ex3}}</div>
						<div>身份证号码：{{formData.gmy_ex5}}</div>
						<div>祭扫人数：{{formData.gmy_ex4}}</div>
						<div>祭扫日期：{{formData.gmy_dat1}}</div>
						<div>逝者姓名：{{formData.gmy_ex2}}</div>
					</template>
					<template v-else-if="formData.szid_ex11 == '预约看墓'">
						<div>预约人：{{formData.gy_ex1}}</div>
						<div>联系电话：{{formData.gy_ex3}}</div>
						<div>身份证号：{{formData.gy_ex5}}</div>
						<div>看墓日期：{{formData.gy_dat1}}</div>
						<div>去现场人数：{{formData.gy_ex4}}</div>
					</template>
				</template>
				<!-- <template #value>
					<van-button 
						type="primary" 
						size="mini"
						@click.stop="cancel(formData)"
					>
						取消预约
					</van-button>
				</template> -->
			</van-cell>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue'
    import type { Ref } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant'
    import { fxygmOrderDetailsApi } from '@/apis'
	import { useStore } from '@/store'
	// import { phoneHide, cardHide } from '@/utils/utils'
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

	const formData: Ref<any> = ref({

	})
	showLoadingToast({
		message: '加载中...',
		forbidClick: true,
		duration: 0
	});
	fxygmOrderDetailsApi({
		// openid: store.openid,
		szid_id: route.query.szid_id
	}).then(res => {
		formData.value = res?.data
	}).finally(() => {
		closeToast();
	})
	
	const routerPush = (val) => {
		// 后面看是跳转还是什么
		console.log(val)
	}
</script>

<style lang="scss" scoped>
	.noticeList {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
        background: url(@/assets/bg/bg11.png);
        background-size: 100% 100%;
	}
        // background: url(@/assets/policy/policybg-car.png) no-repeat;
    .my-header {
        display: flex;
        justify-content: center;
        // background: url(@/assets/policy/policybg.png) no-repeat;
        // background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    
    .my-header::after {
        content: '';
        width: 100%;
        height: 185px;
        // margin-top: 20px;
        // background: url(@/assets/banner/gmjs_bg.png);
        background: url(@/assets/policy/policybg-car.png) no-repeat;
        background-size: 110% 110%;
        background-position: 30% 50%;
        border-radius: 5px;
    }
	// .my-header {
	// 	display: flex;
	// 	justify-content: center;
	// 	background: url(@/assets/policy/policybg.png) no-repeat;
	// 	background-size: 100% 90%;
	// 	margin-bottom: 10px;
	// 	border-radius: 10px;
	// }

	// .my-header::after {
	// 	content: '';
	// 	width: 95%;
	// 	height: 185px;
	// 	margin-top: 20px;
	// 	background: url(@/assets/banner/gmjs_bg.png);
	// 	background-size: 100% 100%;
	// 	border-radius: 5px;
	// }

	.my-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.maindiv {
		width: 90%;
		/* border: 1px solid #2C3E50; */
		box-shadow: 0px 0px 5px 5px #e3eee9;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 25px;
	}

	.maindivfont1 {
		color: #333333;
		font-size: 12pt;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.maindivfont2 {
		color: #666666;
		font-size: 10pt;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.listmain {
		flex: 1;
		overflow: auto;
	}
</style>